<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query
              :searchParam="searchParam.param"
              @on-search="search"
              @on-reset="onReset"
            ></pro-query>
          </div>
          <!-- 列表 -->
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :operate="operate"
            :toolbar="toolbar"
            :param="state.param"
            :pagination="pagination"
          >
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
    <importModal
      :exportConfig="exportConfig"
      :visible="state.importVisible"
      @close="closeImport"></importModal>
  </page-layout>
</template>

<script>
import { message, modal } from "ant-design-vue";
import { filterEmptyByObject } from '@/tools/common'
import { page, remove, templateUrl, imports } from "@/api/module/ta";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { reactive, createVNode, ref, onMounted, onActivated } from "vue";
import { useRouter } from "vue-router";
import dictEnum from "@/const/dict";
import { getDictByCodesReturnObj } from "@/tools/get-dict";
import moment from "moment";
import { useI18n } from "vue-i18n";

import importModal from '@/component/import/index.vue'

const removeKey = "remove";

export default {
  name: '"ta-manage-list"',
  components: {
    importModal
  },
  setup() {
    const tableRef = ref();
    const { t } = useI18n();

    const router = useRouter();

    const switchFormat = {
      yes: true,
      no: false,
      event: function (value, record) {
        record.enable = !record.enable;
        return value;
      },
    };

    const columns = [
      {
        title: "助教编码",
        dataIndex: "code",
        width: "150",
        key: "code",
      },
      {
        title: t('ta-manage.label.heName'),
        dataIndex: "taName",
        width: "100",
        key: "taName",
        ellipsis: true,
      },
      {
        title: t('ta-manage.label.school'),
        dataIndex: "schName",
        width: "100",
        ellipsis: true,
      },
      {
        title: t('ta-manage.label.major'),
        dataIndex: "taMajor",
        width: "100",
        ellipsis: true,
      },
      {
        title: t('ta-manage.label.gender'),
        dataIndex: "taSex",
        width: "100",
        cellRender: (record, data) => {
          const item = dictLists.data[dictEnum.SEX]
            ? dictLists.data[dictEnum.SEX].find((v) => v.value == data)
            : {};
          return item ? item.label : "";
        },
      },
      {
        title: t('ta-manage.label.phone'),
        dataIndex: "taPhone",
        width: 130,
      },
      {
        title: t('ta-manage.label.email'),
        dataIndex: "taEmail",
        width: 160,
        ellipsis: true,
      },
      {
        title: t('ta-manage.label.creator'),
        dataIndex: "createBy",
        width: "100",
        ellipsis: true,
      },
      {
        title: t('ta-manage.label.creationTime'),
        dataIndex: "creatTiem",
        width: 160,
        ellipsis: true,
        cellRender: (record, data) => {
          return moment(data).format("YYYY-MM-DD HH:mm:ss");
        },
      },
    ];

    let dictLists = reactive({
      data: {},
    });
    /// 数据来源 [模拟]
    const fetch = async (param) => {
      let response = await page(param);
      return {
        data: response.data.record,
        total: response.data.total,
      };
    };

    /// 删除配置
    const removeMethod = (record) => {
      modal.confirm({
        title: "您是否确定要删除此数据?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确定",
        cancelText: "取消",
        onOk() {
          remove({ id: record.id }).then((response) => {
            if (response.success) {
              message
                .success({ content: "删除成功", key: removeKey, duration: 1 })
                .then(() => {
                  tableRef.value.reload();
                });
            } else {
              message.error({
                content: "删除失败",
                key: removeKey,
                duration: 1,
              });
            }
          });
        },
      });
    };

    /// 行操作
    const operate = [
      {
        label: t('button.detail'),
        event: function ({ id }) {
          router.push({
            path: "/university/ta-manage/detail",
            query: { id: id },
          });
        },
      },
      {
        label: t('button.delete'),
        event: function (record) {
          removeMethod(record);
        },
      },
    ];

    const toolbar = [
      {
        code: "",
        label: t('ta-manage.label.addTA'),
        type: "primary",
        event: (selectedRowKeys) => {
          handleAdd();
        },
      },
      {
        code: "",
        label: t('button.batchImport'),
        type: "",
        event: (selectedRowKeys) => {
          handleExport();
        },
      },
    ];

    const pagination = {
      pageNum: 1,
      pageSize: 10,
    };

    const state = reactive({
      selectedRowKeys: [],
      param: {},
      visibleSave: false,
      visibleEdit: false,
      visibleInfo: false,
      recordEdit: {},
      recordInfo: {},
      importVisible: false,
    });

    let searchParam = reactive({
      param: [],
    });

    const search = function (value) {
      state.param = {
        ...state.param,
        ...filterEmptyByObject(value),
        statCreateTime: value.createTime ? moment(value.createTime[0]).valueOf() : undefined,
        endCreateTime: value.createTime ? moment(value.createTime[1]).valueOf() : undefined,
      };
    };
    const onReset = function () {
      state.param = {};
    };

    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const handleAdd = () => router.push("/university/ta-manage/add");

    const exportConfig = reactive({
      title: t('ta-manage.label.TA-manage'),
      exportExcel: imports,
      templateUrl: templateUrl,
      downMethod: 'GET',
      fileName: t('ta-manage.label.TA-manageImportTemplate'),
      params: {}
    })
    const handleExport = () => {
      state.importVisible = true
    };
    const closeImport = (value) => {
      state[value] = false
      tableRef.value.reload()
    }


    onActivated(() => {
      tableRef.value.reload();
    })
    onMounted(async () => {
      dictLists.data = await getDictByCodesReturnObj([dictEnum.SEX]);

      searchParam.param = [
        {
          key: "taName",
          type: "input",
          label: t('ta-manage.label.heName'),
          placeholder: t('placeholder.pleaseEnter'),
        },
        {
          key: "taMajor",
          type: "input",
          label: t('ta-manage.label.major'),
          placeholder: t('placeholder.pleaseEnter'),
        },
        {
          key: "schName",
          type: "input",
          label: t('ta-manage.label.schoolName'),
          placeholder: t('placeholder.pleaseEnter'),
        },
        {
          dataIndex: "createTime",
          key: "createTime",
          keys: ["statCreateTime", "endCreateTime"],
          type: "rangeTime",
          label: t('label.creationTime'),
          showTime: { format: "HH:mm:ss" },
          format: "YYYY:MM:DD HH:mm:ss",
          valueFormat: "YYYY:MM:DD HH:mm:ss",
          placeholder: [t('label.startTime'), t('label.endTime')],
          hidden: true,
        },
        {
          key: "createBy",
          type: "input",
          label: t('label.creator'),
          hidden: true,
          placeholder: t('placeholder.pleaseEnter'),
        },
      ];
    });
    return {
      t,
      state,
      fetch,
      search,
      onReset,
      columns,
      operate,
      pagination,
      searchParam,
      onSelectChange,
      closeImport,
      exportConfig,

      handleAdd,
      tableRef,
      toolbar,
      handleExport,
      dictLists,
    };
  },
};
</script>
